'use strict';
angular.module('directives',[])
    .directive('loadProgress',[function(){
        return {
            restrict:'A',
            replace:true,
            compile:function(ele){
                if(ele.length === 1){
                    var node=ele[0];
                    var width='200';
                    var height='200';
                    var canvas=document.createElement('canvas');
                    canvas.setAttribute('width',width);
                    canvas.setAttribute('height',height);
                    canvas.setAttribute('progress-model',node.getAttribute('progress-model'));
                    node.parentNode.replaceChild(canvas,node);
                    var o_lineWidth='20';
                    var i_lineWidth='5';
                    var o_backColor='#eee';
                    var loadColor='#0f0';
                    var i_backColor='#eee';
                    var fontColor='#666';
                    var o_radius='80';
                    var i_radius='50';
                    var font='30px Arial';
                    return {
                        pre:function(scope){
                            var expression=canvas.getAttribute('progress-model');
                            scope.$watch(expression,function(newValue){
                                var context=canvas.getContext('2d');
                                context.clearRect(0,0,width,height);
                                var x=width/2;
                                var y=height/2;
                                //初始 绘制外圆轮廓
                                context.beginPath();
                                context.arc(x,y,parseInt(o_radius),0,Math.PI*2,false);
                                context.lineWidth=parseInt(o_lineWidth);
                                context.strokeStyle=o_backColor;
                                context.stroke();
                                //初始 绘制内圆轮廓
                                context.beginPath();
                                context.arc(x,y,parseInt(i_radius),0,Math.PI*2,false);
                                context.lineWidth=parseInt(i_lineWidth);
                                context.strokeStyle=i_backColor;
                                context.stroke();
                                //初始 绘制中心文字
                                context.font=font;
                                context.textAlign='center';
                                context.textBaseline='middle';
                                context.fillStyle=fontColor;
                                context.fillText(newValue.label,x,y);
                                //取得旋转角度
                                var starAngle=-(Math.PI/2);
                                var endAngle=((Math.PI*2)*newValue.percentage)-(Math.PI/2);
                                var anticlockwise=false;
                                //进行中 绘制外圆轮廓
                                context.beginPath();
                                context.arc(x,y,parseInt(o_radius),starAngle,endAngle,anticlockwise);
                                context.lineWidth=parseInt(o_lineWidth);
                                context.strokeStyle=loadColor;
                                context.stroke();
                                //进行中 绘制内圆轮廓
                                context.beginPath();
                                context.arc(x,y,parseInt(i_radius),starAngle,endAngle,anticlockwise);
                                context.lineWidth=parseInt(i_lineWidth);
                                context.strokeStyle=loadColor;
                                context.stroke();
                            },true)
                        }
                    }

                }
            }

        }
    }]);

